<!-- 菜单 -->
<template>
  <view style="padding: 5px 5px 15px 5px">
    <view v-for="(item,index) in MENUDATA1" :key="index" style="padding-top: 5px;">
      <uni-card :is-shadow="false" padding="0" spacing="0" margin="0" :border="false">
        <view class="menu-text">{{item.title}}</view>
        <view class="menu-dom">
          <uni-grid :column="4" :showBorder="false" :square="false">
            <uni-grid-item v-for="item1 in item.child" :key="item1.key">
              <navigator :url="item1.url" hover-class="none">
                <view class="grid-item-box">
                  <image :src="item1.icon" mode="heightFix" style="height: 80rpx;"></image>
                  <text>{{item1.title}}</text>
                </view>
              </navigator>
            </uni-grid-item>
          </uni-grid>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { MENUDATA1 } from "./menuData";
</script>

<style lang="scss" scoped>
  .menu-text {
    padding: 20rpx;
    font-size: 30rpx;
    font-weight: 600;
  }

  .menu-dom {
    text-align: center;
    color: #646566;
    line-height: 1.5;
    font-size: 14px;

    .grid-item-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      font-size: 24rpx;
    }
  }
</style>